<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <TodoHeader @addTask="addTask"></TodoHeader>
    <!-- 列表区域 -->
    <TodoBody @del="del" :list ="list"></TodoBody>
    <!-- 统计和清空 -->
    <TodoFooter @clear="clear" :list ="list"></TodoFooter>
  </section>
</template>


<script>
import TodoHeader from "@/components/TodoHeader.vue";
import TodoBody from "@/components/TodoBody.vue";
import TodoFooter from "@/components/TodoFooter.vue";

export default {
  data () {
    return {
      taskName: '',
      list: JSON.parse(localStorage.getItem("list")) || [],
    }
  },
  components:{
    TodoHeader,TodoBody,TodoFooter
  },
  methods:{
    addTask(taskName){
      this.list.unshift({id:new Date().getTime(), name: taskName});
      this.taskName = taskName;
    },
    clear(){
      this.list = []
    },
    del(id){
      this.list = this.list.filter(item=> item.id!==id)
    }
  },
  watch:{
    deep: true,
    list(){
      localStorage.setItem("list", JSON.stringify(this.list))
    }
  }
}
</script>

<style>

</style>
